import { Component, Vue } from 'vue-facing-decorator';
import { ref } from 'vue';
import { Nullable } from '@vben/types';
import { AppStorage, PermissionStorage, UserStorage } from '@2/app/core/ioc';
import { PermissionModeEnum } from '@/enums/appEnum';
import { useDesign } from '@/hooks/web/useDesign';
import Login from './login.form.vue';

/**
 * @program: microservice-central-portal
 * @description: 用户会话超时处理页面
 * @author: baiHoo.chen
 * @create: 2022年5月24日
 **/
@Component({
  name: 'SessionTimeoutLogin',
  components: { Login },
})
export default class SessionTimeoutLogin extends Vue {
  public userId = ref<Nullable<number | string>>(0);
  public prefixCls = useDesign('st-login').prefixCls;
  /**
   * 页面加载完成后，使用VUE生命周期钩子函数回调处理
   */
  public mounted() {
    const user = UserStorage.getAppUser();
    this.userId.value = user.id;
    console.log('Mounted', user);
  }

  /**
   * 页面卸载前，使用VUE生命周期钩子函数回调处理
   */
  public beforeUnmount() {
    if (this.userId.value && this.userId.value !== UserStorage.getAppUser().id) {
      // 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
      document.location.reload();
    } else if (this.isBackMode() && PermissionStorage.getLastBuildMenuTime() === 0) {
      // 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
      document.location.reload();
    }
  }
  isBackMode() {
    return AppStorage.getProjectConfig().permissionMode === PermissionModeEnum.BACK;
  }
}
